//index
<template>
    <div class="box" :style="{'height':H+'px'}" >
        <div class="left">
            <div style="height:60px;background-color:rgb(82,104,190);line-height: 60px" >
                <h3>后台管理系统</h3></div>

            <div v-show="jur.qgenral">
                <div @click="show1" style="text-align: center;"><span class="iconfont icon-zhuye"></span>
                    <router-link to="/index/dataOverview"><span class="ls-span1">概况</span></router-link>
                </div>
            </div>
            <div v-show="jur.qcommodity">
                <div @click="show2"><span class="iconfont icon-beifen1"></span>
                    商品管理
                </div>
                <ul v-show="b">
                    <router-link to="/index/essentialInformation" tag="li">基本信息</router-link>
                    <router-link to="/index/listOfGoods" tag="li">商品列表</router-link>
                    <router-link to="/index/classification" tag="li">分类管理</router-link>
                </ul>
            </div>
            <div v-show="jur.qdeal">
                <div @click="show3" style="text-align: center;"><span class="iconfont icon-beifen3"></span>
                    交易管理
                </div>
                <ul v-show="c">
                    <router-link to="/index/orderManagement" tag="li">订单管理</router-link>
                    <router-link to="/index/evaluationManagement" tag="li">评价管理</router-link>
                    <router-link to="/index/refund" tag="li">退款管理</router-link>
                    <router-link to="/index/orderDetails" tag="li">订单详情</router-link>
                    <router-link to="/index/orderDelivery" tag="li">订单发货</router-link>
                </ul>
            </div>
            <div v-show="jur.qstatistics">
                <div @click="show4"><span class="iconfont icon-beifen"></span>
                    报表统计</div>
                <ul v-show="d">
                    <router-link to="/index/commodityAnalysis" tag="li">商品分析</router-link>
                </ul>
            </div>
            <div v-show="jur.qfinance">
                <div @click="show7"><span class="iconfont icon-beifen4"></span>
                    财务管理</div>
                <ul v-show="g">
                    <router-link to="/index/financialOverview" tag="li">财务总览</router-link>
                </ul>
            </div>

            <div v-show="jur.quser">
                <div @click="show5"><span class="iconfont icon-beifen2"></span>
                    用户管理</div>
                <ul v-show="e">
                    <router-link to="/index/useDisplay" tag="li">用户展示</router-link>
                    <router-link to="/index/useManagement" tag="li">后台用户管理</router-link>
                    <router-link to="/index/role" tag="li">角色管理</router-link>
                    <router-link to="/index/power" tag="li">权限管理</router-link>
                </ul>
            </div>
        </div>
        <div class="right">
                <router-view></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Index",
        data:function () {
            return {
                a:false,
                b:false,
                c:false,
                d:false,
                e:false,
                f:false,
                g:false,
                tab:'',
                H:0,

                jur:{
                    qgenral:true,
                    qcommodity:true,
                    qdeal:true,
                    qstatistics:true,
                    qfinance:true,
                    quser:true
                }

            }
        },
        methods:{
            show(who){
                let a=this[who];
                this.a=false;
                this.b=false;
                this.c=false;
                this.d=false;
                this.e=false;
                this.f=false;
                this.g=false;
                if (a){
                    return
                } else {
                    this[who]=true;
                }
            },
            show1(){
                this.show('a')
            },
            show2(){
                this.show('b')
            },
            show3(){
                this.show('c')
            },
            show4(){
                this.show('d')
            },
            show5(){
                this.show('e')
            },
            show7(){
                this.show('g')
            },

        },
        mounted(){
            let h=document.documentElement.clientHeight;
            this.H=h;
            this.$axios({
                url:'/api/judge',
                method:'post'
            }).then((res)=>{
                console.log(res.data[0])
                console.log(res.data[0].r_id)
                //if(res.data.)
                switch (res.data[0].r_id) {
                    case 1 :
                        this.jur.qgenral=true;
                        this.jur.qcommodity=true;
                        this.jur.qdeal=true;
                        this.jur.qstatistics=true;
                        this.jur.qfinance=true;
                        this.jur.quser=true;
                        break;
                    case 2 :
                        this.jur.qgenral=true;
                        this.jur.qcommodity=true;
                        this.jur.qdeal=false;
                        this.jur.qstatistics=false;
                        this.jur.qfinance=false;
                        this.jur.quser=false;
                        break;
                    case 3:
                        this.jur.qgenral=true;
                        this.jur.qcommodity=false;
                        this.jur.qdeal=true;
                        this.jur.qstatistics=false;
                        this.jur.qfinance=false;
                        this.jur.quser=false;
                        break;
                    case 4:
                        this.jur.qgenral=true;
                        this.jur.qcommodity=false;
                        this.jur.qdeal=false;
                        this.jur.qstatistics=true;
                        this.jur.qfinance=true;
                        this.jur.quser=false;
                        break;
                }
            })

        }
    }

</script>
<style scoped lang="less">

    *{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .box{
        width: 1200px;
        display: flex;
        /*min-height: 562px;*/
        margin: 0 auto;

    }
    .left{
        flex: 1.5;
        background: #273043;
        color: #d4d6d9;
        /*height: 650px;*/
        div div{
            height: 50px;
            line-height: 50px;
            cursor: pointer;
        }
        h1{
            text-align: center;
        }
        ul{
            background: #222939;

            cursor: pointer;

            li{
                height: 50px;
                line-height: 50px;
                padding-left: 15%;
            }
            li:hover{
                background: #49526d;
            }
        }
    }
    .right{
        flex: 8.5;
        background: rgb(240,240,248);
        .rightMain{
            width: 96%;
            min-height: 568px;
            background: white;
            margin-left: 2%;
            margin-top: 2%;
        }
    }

    .icon-gaikuang2{
        margin-left: 25.3%;
        margin-right: 12.2px;
    }
    .icon-caiwu{
        margin-left: 22.7%;
        margin-right: 12.2px;
    }
    .icon-dingdan1{
        margin-left: 23%;
        margin-right: 10px;
    }
    .icon-shangpin{
        margin-left: 24.2%;
        margin-right: 10px;
    }
    .icon-yonghu1{
        margin-left: 21.4%;
        margin-right: 11px;
    }
    .icon-shuju1{
        margin-left: 20%;
        margin-right: 11.5px;
    }
    .icon-shouhou{
        margin-left: 19.8%;
        margin-right: 11px;
    }
    .icon-quanxianguanli{
        margin-left: 19%;
        margin-right: 10px;
    }

    .s1{
        margin-left: 28px;
        font-size: 17px;
    }
    .s2{
        margin-left: 75%;
        font-size: 26px;
    }
    .s3{
        margin-left: 50px;
    }
    .exit{
        display: inline-block;
        text-align: center;
        border: none;
        margin-left:10px;
        cursor: default;
    }
    .ls-span1{
        color: #D4D6D9;

    }
    /*#app>div>div>div>div>.router-link-exact-active>.router-link-active{*/
    /*    text-decoration:none*/
    /*}*/

    #app>.box>.left>div>div>a{
        text-decoration:none
    }
</style>